<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./../../layui/css/layui.css">
    <title>点样式编辑</title>
    <style>
        .l_title{
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }
        .none{
            display: none;
        }
        /*  */
        .hidden{
            display: none;
        }
        .m_c_upload{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -36px;
            margin-top: -10px;
        }
        .screenshot{
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .colorChoose{
            float: left !important;
            width: 120px;
        }
        .layui-form-select dl dd.layui-this{
            background-color: #00aeff !important;
        }
        .layui-form-radioed>i, .layui-form-radio>i:hover {
            color: #00aeff !important;
        }
        .layui-form-item .layui-form-label{
            white-space:unset!important;
        }
    </style>
</head>
<body>
    <div class="layui-form"  lay-filter="sIfram">
        <div class="layui-form-item">
            <label  class="layui-form-label l_title">选择线类型</label>
            <div class="layui-input-block">
                <select name="styletype" id="allPoint" lay-filter="allPoint">
                    <option value="pointlayer">基础点</option>
                    <option value="labellayer">文本点</option>
                    <option value="billboardlayer">图片点</option>
                    <option value="modellayer">模型点(切片不可用)</option>
                </select> 
            </div>
        </div>
        <!-- 基础点 -->
        <div class="basisPoints none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="21">21</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">是否聚合</label>
                <div class="layui-input-block">
                  <input type="checkbox"  name="collect" lay-skin="switch" lay-filter="switchTest" lay-text="聚合|不聚合">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- <div class="layui-input-block">
                    <select name="xsjb" lay-verify="">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select> 
                </div> -->
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">像素大小</label>
                <div class="layui-input-block">
                    <input type="text" name="pixelSize"  placeholder="请输入像素大小" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">点颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="color" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="pointColor-input">
                    <div style="float: left;">
                        <div id="pointColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">边框颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineColor" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="pBorderColor-input">
                    <div style="float: left;">
                        <div id="pBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">边框宽度</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineWidth"  placeholder="请输入边框宽度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="pointHeightType" lay-verify="">
                        <option value="绝对值">绝对值</option>    
                        <option value="依附地表">依附地表</option>
                        <option value="相对地表">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示高度</label>
                <div class="layui-input-block">
                    <input type="text" name="pointHeight"  placeholder="请输入显示高度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
        </div>
        <!-- 文本点 -->
        <div class="textPoint none">
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="21">21</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">是否聚合</label>
                <div class="layui-input-block">
                  <input type="checkbox"  name="collect" lay-skin="switch" lay-filter="switchTest" lay-text="聚合|不聚合">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">选择字体</label>
                <div class="layui-input-block">
                    <select name="font_family" lay-verify="">
                        <option value="宋体">宋体</option>
                        <option value="黑体">黑体</option>
                        <option value="微软雅黑">微软雅黑</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示文本</label>
                <div class="layui-input-block">
                    <div style="float: left; margin-right: 5px;">
                        <input type="checkbox"  name="labelText" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                    <div style="float:left;width:140px;">
                        <select name="labelText1" lay-verify="">
                            <option value="">下拉选择属性</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">字体大小</label>
                <div class="layui-input-block">
                    <input type="text" name="font_size"  placeholder="请输入字体大小" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">填充方式</label>
                <div class="layui-input-block">
                    <select name="stylet" lay-verify="">
                        <option value="边框和内容填充">边框和内容填充</option>
                        <option value="内容填充">内容填充</option>
                        <option value="边框填充">边框填充</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">填充颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="fillColor" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpFillColor-input">
                    <div style="float: left;">
                        <div id="tpFillColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">边框颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineColor" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpBorderColor-input">
                    <div style="float: left;">
                        <div id="tpBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">边框宽度</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineWidth"  placeholder="请输入边框宽度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item" id="fontBg">
                <label  class="layui-form-label l_title">文字背景</label>
                <div class="layui-input-block">
                    <input type="checkbox"  name="showBackground" lay-skin="switch" lay-filter="fontBg" lay-text="显示|不显示">
                </div>
            </div>
            <div class="layui-form-item hidden" id="bgColor">
                <label  class="layui-form-label l_title">背景颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="backgroundColor" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpBgColor-input">
                    <div style="float: left;">
                        <div id="tpBgColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">水平布局方式</label>
                <div class="layui-input-block">
                    <select name="horizontalOrigin" lay-verify="">
                        <option value="水平居中">水平居中</option>
                        <option value="水平居左">水平居左</option>
                        <option value="水平居右">水平居右</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">文字布局方式</label>
                <div class="layui-input-block">
                    <select name="verticalOrigin" lay-verify="">
                        <option value="居于基线">居于基线</option>    
                        <option value="垂直居中">垂直居中</option>
                        <option value="垂直底部">垂直底部</option>
                        <option value="垂直顶部">垂直顶部</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="heightReference" lay-verify="">
                        <option value="绝对值">绝对值</option>    
                        <option value="依附地表">依附地表</option>
                        <option value="相对地表">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示高度</label>
                <div class="layui-input-block">
                    <input type="text" name="pointHeight"  placeholder="请输入显示高度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
        </div>
        <!-- 图片点 -->
        <div class="ImagePoint none">
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="21">21</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">是否聚合</label>
                <div class="layui-input-block">
                  <input type="checkbox"  name="collect" lay-skin="switch" lay-filter="switchTest" lay-text="聚合|不聚合">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示图标</label>
                <div class="layui-input-block">
                    <input type="text" name="image"  placeholder="请输入模板名称" autocomplete="off" class="layui-input"> 
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-top: 5px;">选择文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">边框颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="color" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="IBorderColor-input">
                    <div style="float: left;">
                        <div id="IBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">缩放比例</label>
                <div class="layui-input-block">
                    <input type="text" name="scale"  placeholder="请输入缩放比例" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">图片宽度</label>
                <div class="layui-input-block">
                    <input type="text" name="width"  placeholder="请输入图片宽度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">图片高度</label>
                <div class="layui-input-block">
                    <input type="text" name="height"  placeholder="请输入图片高度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="heightReference" lay-verify="">
                        <option value="绝对值">绝对值</option>    
                        <option value="依附地表">依附地表</option>
                        <option value="相对地表">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示高度</label>
                <div class="layui-input-block">
                    <input type="text" name="pointHeight"  placeholder="请输入显示高度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
        </div>
        <!-- 模型点 -->
        <div class="modelPoint none">
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="21">21</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">是否聚合</label>
                <div class="layui-input-block">
                  <input type="checkbox"  name="collect" lay-skin="switch" lay-filter="switchTest" lay-text="聚合|不聚合">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示模型</label>
                <div class="layui-input-block">
                    <input type="text" name="uri"  placeholder="请输入显示模型" autocomplete="off" class="layui-input"> 
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-top: 5px;">选择文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">模型颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="color" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="MStyleColor-input">
                    <div style="float: left;">
                        <div id="MStyleColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">高亮颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="lightColor" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="MHighlightColor-input">
                    <div style="float: left;">
                        <div id="MHighlightColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">缩放比例</label>
                <div class="layui-input-block">
                    <input type="text" name="scale"  placeholder="请输入缩放比例" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="heightReference" lay-verify="">
                        <option value="13">绝对值</option>    
                        <option value="13">依附地表</option>
                        <option value="231">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示高度</label>
                <div class="layui-input-block">
                    <input type="text" name="height"  placeholder="请输入显示高度" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input"> 
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="./../../node_modules/iframeResizer.contentWindow.js"></script>
<script src="./../../node_modules/iframeResizer.js"></script>
<script src="./../../layui/layui.js"></script>
<script>
    var form = null;
     $(function () {
        //  获取最外层iframe的id去适配
        var $view = parent.parent.document.getElementById("view");

        layui.use(['element','form','colorpicker'], function () {
            var $ = layui.$,
                element = layui.element,
                colorpicker = layui.colorpicker;
            form = layui.form;

            // 是否默认基础点
            var pv  = $('#allPoint').val();
            if(pv == 'pointlayer'){
                $('.basisPoints').removeClass('none')
            }
            //给表单赋值
            if (parent.sIframForm  && parent.sIframForm.d_type === 'point') {
                var obj = JSON.parse(JSON.stringify(parent.sIframForm))
                //样式类型
                lineType(obj.styletype);
                //判断文本点中的文字背景按钮
                if (obj.wzbj) {
                    $('#bgColor').show()
                }
                form.val('sIfram',obj);
            }
            // 监听基础点、文本点、图片点、模型点
            form.on('select(allPoint)', function (data) {
                lineType(data.value)
            });
            //监听指定开关
            // 监听文本点中的文字背景按钮
            form.on('switch(fontBg)', function(data){
                if(this.checked == true){
                    $('#bgColor').show()
                }else{
                    $('#bgColor').hide()
                }
            }); 
            // 基础点 颜色选择器
            colorpicker.render({
                elem: '#pointColor'
                ,color: (parent.sIframForm && parent.sIframForm.color) || '#1c97f5'
                ,done: function(color){
                $('#pointColor-input').val(color);
                }
            });
            // 基础点 边框颜色
            colorpicker.render({
                elem: '#pBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.outlineColor) || '#1c97f5'
                ,done: function(color){
                $('#pBorderColor-input').val(color);
                }
            });
            // 文本点 填充颜色
            colorpicker.render({
                elem: '#tpFillColor'
                ,color: (parent.sIframForm && parent.sIframForm.fillColor) || '#1c97f5'
                ,done: function(color){
                $('#tpFillColor-input').val(color);
                }
            });
            // 文本点 边框颜色
            colorpicker.render({
                elem: '#tpBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.outlineColor) || '#1c97f5'
                ,done: function(color){
                $('#tpBorderColor-input').val(color);
                }
            });
            // 文本点 背景色
            colorpicker.render({
                elem: '#tpBgColor'
                ,color:(parent.sIframForm && parent.sIframForm.backgroundColor) || '#1c97f5'
                ,done: function(color){
                $('#tpBgColor-input').val(color);
                }
            });
            // 图片点 边框
            colorpicker.render({
                elem: '#IBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.color) || '#1c97f5'
                ,done: function(color){
                $('#IBorderColor-input').val(color);
                }
            });
            // 模型点 模型颜色
            colorpicker.render({
                elem: '#MStyleColor'
                ,color: (parent.sIframForm && parent.sIframForm.color) || '#1c97f5'
                ,done: function(color){
                $('#MStyleColor-input').val(color);
                }
            });
            // 模型点 高亮颜色
            colorpicker.render({
                elem: '#MHighlightColor'
                ,color: (parent.sIframForm && parent.sIframForm.lightColor) || '#1c97f5'
                ,done: function(color){
                $('#MHighlightColor-input').val(color);
                }
            });
        });
    })

    //线类型选择
    function lineType(data) {
        if(data == 'pointlayer'){ //基础点
            $('.basisPoints').removeClass('none')
            $('.textPoint').addClass('none')
            $('.ImagePoint').addClass('none')
            $('.modelPoint').addClass('none')
        }else if(data == 'labellayer'){ //文本点
            $('.basisPoints').addClass('none')
            $('.textPoint').removeClass('none')
            $('.ImagePoint').addClass('none')
            $('.modelPoint').addClass('none')
        }else if(data == 'billboardlayer'){ //图片点
            $('.basisPoints').addClass('none')
            $('.textPoint').addClass('none')
            $('.ImagePoint').removeClass('none')
            $('.modelPoint').addClass('none')
        }else if(data == 'modellayer'){ //模型点(切片不可用)
            $('.basisPoints').addClass('none')
            $('.textPoint').addClass('none')
            $('.ImagePoint').addClass('none')
            $('.modelPoint').removeClass('none')
        }
        $('#Content').iFrameResize([{log: true}]);
    }

</script>
</html>